<template>
  <div class="expert-database">
    <div class="banner">
      <div class="banner-title">专家库</div>
      <div class="banner-search">
        <el-select v-model="selectValue">
          <el-option label="姓名" value="name" />
          <el-option label="职称" value="expertTitle" />
          <el-option label="机构" value="unit" />
          <el-option label="研究方向" value="researchDirection" />
        </el-select>
        <div class="input-line"></div>
        <div class="input">
          <el-input size="large" @keydown.enter="searchList" v-model="searchValue" placeholder="请输入内容">
            <template #suffix>
              <el-icon @click="searchList">
                <Search />
              </el-icon>
            </template>
          </el-input>
        </div>
      </div>
    </div>
    <div class="expert-main max-wrapper">
      <div class="main-l">
        <div class="institution">
          <div class="common-title">专家类别</div>
          <div class="item-list">
            <div @click="filterList(filterItem, 'expertType')" v-for="(filterItem, filterIndex) in expertTypeFilter.list"
              :key="filterIndex" :class="['info-item', filterType == filterItem.colValue ? 'active' : '']">
              <span class="otw-1">{{ filterItem.colValue }}</span><span>({{ filterItem.cnt }})</span>
            </div>
            <el-collapse-transition>
              <div v-show="expertTypeFilter.expand">
                <div @click="filterList(filterItem, 'expertType')"
                  v-for="(filterItem, filterIndex) in expertTypeFilter.more" :key="filterIndex"
                  :class="['info-item', filterType == filterItem.colValue ? 'active' : '']">
                  <span class="otw-1">{{ filterItem.colValue }}</span><span>({{ filterItem.cnt }})</span>
                </div>
              </div>
            </el-collapse-transition>
            <div v-if="expertTypeFilter.more.length > 0" @click="expertTypeFilter.expand = !expertTypeFilter.expand"
              :class="['all-expand', expertTypeFilter.expand ? 'active' : '']">
              全部{{ expertTypeFilter.expand ? '收起' : '展开' }}
              <el-icon>
                <DArrowRight />
              </el-icon>
            </div>
          </div>
        </div>
        <div class="institution">
          <div class="common-title">职称</div>
          <div class="item-list">
            <div @click="filterList(filterItem, 'expertTitle')"
              v-for="(filterItem, filterIndex) in expertTitleFilter.list" :key="filterIndex"
              :class="['info-item', filterType == filterItem.colValue ? 'active' : '']">
              <span class="otw-1">{{ filterItem.colValue }}</span><span>({{ filterItem.cnt }})</span>
            </div>
            <el-collapse-transition>
              <div v-show="expertTitleFilter.expand">
                <div @click="filterList(filterItem, 'expertTitle')"
                  v-for="(filterItem, filterIndex) in expertTitleFilter.more" :key="filterIndex"
                  :class="['info-item', filterType == filterItem.colValue ? 'active' : '']">
                  <span class="otw-1">{{ filterItem.colValue }}</span><span>({{ filterItem.cnt }})</span>
                </div>
              </div>
            </el-collapse-transition>
            <div v-if="expertTitleFilter.more.length > 0" @click="expertTitleFilter.expand = !expertTitleFilter.expand"
              :class="['all-expand', expertTitleFilter.expand ? 'active' : '']">
              全部{{ expertTitleFilter.expand ? '收起' : '展开' }}
              <el-icon>
                <DArrowRight />
              </el-icon>
            </div>
          </div>
        </div>
        <div class="institution">
          <div class="common-title">专业</div>
          <div class="item-list">
            <div @click="filterList(filterItem, 'subject')" v-for="(filterItem, filterIndex) in subjectFilter.list"
              :key="filterIndex" :class="['info-item', filterType == filterItem.colValue ? 'active' : '']">
              <span class="otw-1">{{ filterItem.colValue }}</span><span>({{ filterItem.cnt }})</span>
            </div>
            <el-collapse-transition>
              <div v-show="subjectFilter.expand">
                <div @click="filterList(filterItem, 'subject')" v-for="(filterItem, filterIndex) in subjectFilter.more"
                  :key="filterIndex" :class="['info-item', filterType == filterItem.colValue ? 'active' : '']">
                  <span class="otw-1">{{ filterItem.colValue }}</span><span>({{ filterItem.cnt }})</span>
                </div>
              </div>
            </el-collapse-transition>
            <div v-if="subjectFilter.more.length > 0" @click="subjectFilter.expand = !subjectFilter.expand"
              :class="['all-expand', subjectFilter.expand ? 'active' : '']">
              全部{{ subjectFilter.expand ? '收起' : '展开' }}
              <el-icon>
                <DArrowRight />
              </el-icon>
            </div>
          </div>
        </div>
        <div class="institution">
          <div class="common-title">机构</div>
          <div class="item-list">
            <div @click="filterList(filterItem, 'unit')" v-for="(filterItem, filterIndex) in unitFilter.list"
              :key="filterIndex" :class="['info-item', filterType == filterItem.colValue ? 'active' : '']">
              <span class="otw-1">{{ filterItem.colValue }}</span><span>({{ filterItem.cnt }})</span>
            </div>
            <el-collapse-transition>
              <div v-show="unitFilter.expand">
                <div @click="filterList(filterItem, 'unit')" v-for="(filterItem, filterIndex) in unitFilter.more"
                  :key="filterIndex" :class="['info-item', filterType == filterItem.colValue ? 'active' : '']">
                  <span class="otw-1">{{ filterItem.colValue }}</span><span>({{ filterItem.cnt }})</span>
                </div>
              </div>
            </el-collapse-transition>
            <div v-if="unitFilter.more.length > 0" @click="unitFilter.expand = !unitFilter.expand"
              :class="['all-expand', unitFilter.expand ? 'active' : '']">
              全部{{ unitFilter.expand ? '收起' : '展开' }}
              <el-icon>
                <DArrowRight />
              </el-icon>
            </div>
          </div>
        </div>
      </div>
      <div class="main-r">
        <div class="opera-header">
          <div class="sort">
            <!-- <div @click="changeSort(0)" :class="['sort-item', sortType == 0 ? 'sort-active' : '']">默认排序</div> -->
            <!-- <div @click="changeSort(1)" :class="['sort-item', sortType == 1 ? 'sort-active' : '']">时间排序
              <el-icon :style="{ color: timeSort == 'asc' ? '#3B4D89' : '#D3D3D3' }">
                <SortDown />
              </el-icon>
              <el-icon :style="{ color: timeSort == 'desc' ? '#3B4D89' : '#D3D3D3' }">
                <SortUp />
              </el-icon>
            </div>
            <div @click="changeSort(2)" :class="['sort-item', sortType == 2 ? 'sort-active' : '']">相关度排序</div> -->
          </div>
          <div class="num">共 {{ pager.total }} 条数据</div>
        </div>
        <div v-loading="listLoading" class="expert-list">
          <el-empty class="empty" v-if="expertList.length == 0" v-loading="listLoading" description="暂无数据" />
          <div v-else @click="toDetails(experItem)" v-for="(experItem) in expertList" :key="experItem.id"
            :class="['expert-item', experItem.expertType == '宣讲专家' ? 'is-explain' : '']">
            <!-- <img :src="showExpertAvator(experItem)"> -->
            <el-image style="margin: 14px auto 0;width: 221px;height: 253px;" :src="showExpertAvator(experItem)"
              fit="cover">
              <template #error>
                <img src="/images/expert_default.png" style="width: 100%; height: 100%;">
              </template>
            </el-image>
            <div class="expert-card">
              <div class="expert-name flex-center">{{ experItem.name }}</div>
              <span class="overflow-card label-value otw-2">{{ experItem.expertTitle }}</span>
              <span class="hidden">
                <div class="otw-2">
                  <span class="label">职称：</span>
                  <span class="label-value">{{ experItem.expertTitle }}</span>
                </div>
                <div style="flex-wrap: wrap;" :title="experItem.researchDirection">
                  <span class="label">研究方向：</span>
                  <span class="label-value">{{ experItem.researchDirection }}</span>
                </div>
                <div class="otw-1" style="display: flex;justify-content: space-between;">
                  <div>
                    <span class="label-value">成果总量：</span>
                    <span class="label-value">{{ experItem.totalAchievements }}</span>
                  </div>
                  <div>
                    <span class="label-value">被引频次：</span>
                    <span class="label-value">{{ experItem.timesCited }}</span>
                  </div>
                </div>
                <div class="otw-1" style="display: flex;justify-content: space-between;">
                  <div>
                    <span class="label-value">H指数：</span>
                    <span class="label-value">{{ experItem.hIndex ?? 0 }}</span>
                  </div>
                  <div>
                    <span class="label-value">G指数：</span>
                    <span class="label-value">{{ experItem.gIndex ?? 0 }}</span>
                  </div>
                </div>
                <div class="otw-1">
                  <span class="label-value">成果下载量：</span>
                  <span class="label-value">{{ experItem.downloadCount }}</span>
                </div>
              </span>
            </div>
          </div>
        </div>
        <div class="pagination">
          <el-pagination v-if="expertList.length != 0" :total="pager.total" v-model:current-page="pager.pageIndex"
            :page-size="pager.pageSize" @current-change="getList" prev-text="上一页" next-text="下一页"
            layout="prev, pager, next" background />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default { name: 'ExpertDatabase' }
</script>
<script setup>
import { ref } from 'vue';
import { useSystemStore } from '@/stores/modules/system.js';
// SortDown, SortUp
import { Search, DArrowRight } from '@element-plus/icons-vue'
import usePager from '@/hooks/usePager.js'
import { http } from '@/utils/http/index.js'
import { showExpertAvator } from '@/utils/index.js'
import { ElMessage } from 'element-plus';
const systemStore = useSystemStore()

/**设置头部 */
systemStore.headerType = 'platform_black'
systemStore.headerBgcolor = 'normal'
systemStore.headerFontColor = '0'
systemStore.headerWidthType = 'max'



const { pager, listLoading, proxyFun } = usePager(25, '/Expert/GetExpertInfoList')
const expertList = ref([])
const queryParams = ref({ dfi: {} })

const getList = () => {
  proxyFun(queryParams.value).then(res => {
    if (res.isError) return ElMessage.warning('加载列表失败')
    expertList.value = res.result.dataLst
  })
}

getList()

/**右侧排序 */
// const sortType = ref(0)
// const timeSort = ref(false)
// const changeSort = (type) => {
//   if (type == 1) {
//     sortType.value = 3
//     return timeSort.value = timeSort.value == 'asc' ? 'desc' : 'asc'
//   }
//   timeSort.value = false
//   sortType.value = type
// }

/**获取专家分组信息 */
const expertTypeFilter = ref({ list: [], more: [], expand: false })
const subjectFilter = ref({ list: [], more: [], expand: false })
const expertTitleFilter = ref({ list: [], more: [], expand: false })
const unitFilter = ref({ list: [], more: [], expand: false })
const getGroupByCol = (groupbyCol) => {
  http.$POST('/Expert/GetExpertGroupInfoByColName', { groupbyCol }).then(res => {
    if (res.isError) return
    const temp = res.result
    let list = []
    let more = []
    if (temp.length > 6) {
      list = res.result.slice(0, 6)
      more = res.result.slice(7)
    } else {
      list = temp
    }
    if (groupbyCol == 'expertType') {
      expertTypeFilter.value.list = list
      expertTypeFilter.value.more = more
    }
    if (groupbyCol == 'subject') {
      subjectFilter.value.list = list
      subjectFilter.value.more = more
    }
    if (groupbyCol == 'expertTitle') {
      expertTitleFilter.value.list = list
      expertTitleFilter.value.more = more
    }
    if (groupbyCol == 'unit') {
      unitFilter.value.list = list
      unitFilter.value.more = more
    }
  })
}

// 类别
getGroupByCol('expertType')
// 专业
getGroupByCol('subject')
// 职称
getGroupByCol('expertTitle')
// 机构
getGroupByCol('unit')

const filterType = ref('')
const filterList = (filter, field) => {
  if (filterType.value == filter.colValue) {
    queryParams.value = { dfi: {} }
    filterType.value = ''
    return getList()
  }
  filterType.value = filter.colValue
  pager.pageIndex = 1
  queryParams.value = {
    dfi: {
      logic: 0,
      filters: [
        { field, operator: 8, value: filter.colValue }
      ]
    }
  }
  getList()
}

/**搜索框 */
const searchValue = ref('')
const selectValue = ref('name')
const searchList = () => {
  pager.pageIndex = 1
  queryParams.value = {
    dfi: {
      logic: 0,
      filters: [
        { field: selectValue.value, operator: 0, value: searchValue.value }
      ]
    }
  }
  getList()
}

/**跳转详情页面 */
const toDetails = (experItem) => {
  window.open(`/expert-database/expert-details?id=${experItem.id}`)
  // router.push(`/expert-database/expert-details?id=${experItem.id}`)
}
</script>
<style lang='scss' scoped>
@import '@/assets/styles/variables.scss';

.expert-database {
  width: 100%;
  font-family: PingFang SC-Regular, PingFang SC;
  background-color: #F8F8F8;

  .banner {
    width: 100%;
    min-width: $maxWrapper;
    height: 403px;
    background-image: url(@/assets/images/front/xuanchuan_banner.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 36px;

    .banner-title {
      font-size: 55px;
      font-family: Source Han Serif CN-Bold, Source Han Serif CN;
      font-weight: bold;
      color: #FFFFFF;
      letter-spacing: 10px;
      text-shadow: 0px 3px 6px #000000;
      -webkit-text-stroke: 1px #FFFFFF;
      margin-bottom: 37px;
    }

    .banner-search {
      width: 828px;
      height: 52px;
      background-color: #fff;
      border-radius: 2px;
      display: flex;
      align-items: center;

      .input-line {
        border: 1px solid #DCDCDC;
        width: 0;
        height: 16px;
      }

      &:deep(.el-select) {
        width: 110px;

        .el-input__wrapper {
          box-shadow: unset !important;

          &.is-focus {

            box-shadow: unset;
          }

          .el-input__inner {
            text-align: center;
          }
        }

      }

      .input {
        flex: 1;

        &:deep(.el-input) {
          width: 100%;

          .el-input__wrapper {
            box-shadow: none;
          }

          .el-icon {
            cursor: pointer;
            font-size: 24px;
          }
        }

      }
    }
  }

  .expert-main {
    margin-top: -104px;
    display: flex;
    gap: 7px;
    padding-bottom: 104px;

    .main-l {
      width: 270px;

      .common-title {
        font-family: 微软雅黑;
        height: 55px;
        font-size: 18px;
        font-weight: normal;
        color: #333333;
        display: flex;
        align-items: center;
        padding: 0 25px;
        background-color: #FCFAFA;
        border-bottom: 1px solid #E7E7E7;
      }

      .item-list {
        max-height: 750px;
        overflow: auto;
      }

      .info-item {
        font-family: 微软雅黑;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 25px;
        height: 55px;
        border-right: 3px solid transparent;

        &.active {
          background-color: #edecec;
          border-right-color: var(--theme-color);
        }

        span {
          font-size: 14px;
          color: #333333;

          &:first-child {
            width: 68%;
          }

          &:last-child {
            width: 26%;
            text-align: right;
          }
        }
      }

      .all-expand {
        user-select: none;
        font-size: 16px;
        font-weight: 400;
        color: #3F5397;
        padding: 14px 25px;
        text-align: center;
        cursor: pointer;
        position: sticky;
        background-color: #fff;
        bottom: 0;

        .el-icon {
          transform: rotate(90deg);
          vertical-align: middle;
          transition: all .3s;
        }

        &.active {
          .el-icon {
            transform: rotate(-90deg);
          }
        }
      }

      .institution {
        border: 1px solid #E7E7E7;
        background-color: #fff;
        margin-bottom: 22px;
      }
    }

    .main-r {
      flex: 1;
      padding: 0 20px 40px 44px;
      background-color: #fff;

      .opera-header {
        height: 55px;
        border-bottom: 1px solid #EFEFEF;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-family: MicrosoftYaHei-, MicrosoftYaHei;

        .sort {
          display: flex;
          gap: 36px;

          .sort-item {
            user-select: none;
            font-size: 14px;
            font-weight: 400;
            color: #333333;
            cursor: pointer;

            &.sort-active {
              color: #3B4D89;
              font-weight: bold;
            }

            .el-icon {
              vertical-align: middle;

              &:last-child {
                margin-left: -8px;
              }
            }
          }
        }

        .num {
          font-size: 14px;
          font-weight: normal;
          color: #3B4D89;
        }
      }

      .expert-list {
        min-height: 369px;
        width: 100%;
        margin-top: 18px;
        display: flex;
        flex-wrap: wrap;

        .empty {
          flex: 1;
          height: 68vh;
          margin: 0 auto;
        }

        .expert-item {
          cursor: pointer;
          width: 246px;
          height: 357px;
          background-color: #FCFCFC;
          position: relative;
          overflow: hidden;
          margin-bottom: 12px;
          box-shadow: 0px 3px 6px 1px rgba(191, 191, 191, 0.16);
          margin-right: 12px;

          &:nth-child(5n) {
            margin-right: 0;
          }

          &::before {
            content: '';
            position: absolute;
            top: 26px;
            right: 4px;
            width: 28px;
            height: 3px;
            background-color: var(--theme-color);
          }

          &.is-explain::after {
            content: '';
            position: absolute;
            right: 0;
            bottom: 0;
            width: 56px;
            height: 78px;
            background-image: url(@/assets/images/front/expert_medal.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
          }

          img {
            margin: 14px auto 0;
            width: 221px;
            height: 253px;
            object-fit: cover;
            display: block;
          }

          .expert-card {
            width: 100%;
            height: 221px;
            background-color: #FCFCFC;
            position: relative;
            transition: margin-top .3s;
            font-size: 14px;
            padding: 26px 14px 8px;
            display: flex;
            flex-direction: column;
            gap: 6px;

            .hidden {
              display: none;

              >div {
                margin-bottom: 2px;
              }
            }

            .overflow-card {
              display: block;
            }

            .expert-name {
              position: absolute;
              top: -22px;
              left: -1px;
              font-size: 15px;
              width: 95px;
              height: 37px;
              color: #fff;
              background-color: var(--theme-color);
            }

            .label {
              color: #8D8D8D;
            }

            .label-value {
              color: #626262;
            }
          }

          &:hover {
            .overflow-card {
              display: none;
            }

            .hidden {
              display: block;
            }

            .expert-card {
              margin-top: -84px;
            }
          }
        }
      }

      .pagination {
        margin: 32px 0 10px;

        :deep(.el-pagination) {
          justify-content: center;
        }
      }
    }
  }
}
</style>